<template>
	<view>
		<view class="top"></view>

		<uni-card style="position: relative; top: -370rpx; border-radius: 30rpx;">
			<view style="margin: 30rpx 5rpx;padding-bottom: 16rpx; border-bottom: 10rpx solid #f7f7f7;"><span
					style="font-size: 36rpx; color: black;font-weight: 500;">维修信息</span></view>

			<view style="line-height: 75rpx;color: black; font-size: 25rpx;">
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">维修单号：</view>
					<view>{{maintain.number}}</view>
				</view>
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">车主姓名：</view>
					<view>苏念雪</view>
				</view>
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">联系方式：</view>
					<view>{{13359810009}}</view>

					<u-icon style="position: relative; left: 254rpx; top: -15rpx;" name="phone" color="#2979ff"
						size="21"></u-icon>
				</view>


				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">维修方式：</view>
					<view>{{maintain.type==1?'到店维修':'上门取车'}}</view>
				</view>
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">取车位置：</view>
					<view>{{maintain.address}}</view>
					<u-icon style="position: relative; left: 284rpx; top: -15rpx;" name="map" color="#2979ff"
						size="21"></u-icon>
				</view>
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">预约日期：</view>
					<view>{{maintain.subscribeTime}}</view>
				</view>
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">提交日期：</view>
					<view>{{maintain.submitTime}}</view>
				</view>
			</view>
		</uni-card>


		<uni-card style="position: relative; top: -370rpx; border-radius: 30rpx;">
			<view style="margin: 30rpx 5rpx;padding-bottom: 16rpx; border-bottom: 10rpx solid #f7f7f7;"><span
					style="font-size: 36rpx; color: black;font-weight: 500;">车辆信息</span></view>

			<view style="line-height: 75rpx;color: black; font-size: 25rpx;">
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">车辆类型：</view>
					<view>跑车</view>
				</view>
				<view style="display: flex;">
					<view style="width: 120rpx; text-align: left;">车牌号：</view>
					<view>京A99999</view>
				</view>
				<view>整车照片：</view>
				<view>
					<u--image :showLoading="true" :src="src1" width="200rpx" height="200rpx"></u--image>
				</view>

				<view>维修部位照片：</view>
				<view class="carsimg">
					<u--image style="margin-right: 12rpx;" :showLoading="true" :src=maintain.photo width="200rpx"
						height="200rpx"></u--image>
					<u--image style="margin-right: 12rpx;" :showLoading="true" :src="src3" width="200rpx"
						height="200rpx"></u--image>
					<u--image style="margin-right: 12rpx;" :showLoading="true" :src="src4" width="200rpx"
						height="200rpx"></u--image>
				</view>
			</view>
		</uni-card>


		<view style="position: relative; top:-300rpx">
			<u-button :text="buttonText" :class="buttonClass" :style="buttonStyle" @click="updateState()"></u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				maintain: {
					state: '0'
				},
				status: 0,
				buttonText: '确认到场',
				buttonClass: 'btn',
				buttonStyle: {
					'background': 'linear-gradient(to right, rgb(135, 206, 235), rgb(0, 0, 205))',
					'color': '#fff' // 假设初始文字颜色为白色，你可根据实际调整
				},
				src1: '/static/20221028161753f74b08fdd4320.jpeg',
				src2: '/static/OIP-C (1).jpg',
				src3: '/static/OIP-C (2).jpg',
				src4: '/static/OIP-C.jpg'
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo()
		},
		methods: {
			updateState() {
				let that = this
				let state = this.maintain.state == 0 ? 1 : 0
				this.$http({
					url: '/api/repair/maintain/updateState',
					method: 'post',
					data: {
						id: this.id,
						state: state
					},
					success(res) {
						that.getInfo()
					}
				})
			},
			getInfo() {
				let that = this
				this.$http({
					url: '/api/repair/maintain/' + that.id,
					method: 'get',
					success(res) {
						that.maintain = res.data.data
						console.log(that.maintain.state)
					}
				})
			},
			handleClick() {
				// 状态值取反，实现0和1的转换
				// this.status = this.status === 0 ? 1 : 0;
				if (this.status === 0) {
					this.buttonText = '确认到场';
					this.buttonStyle = {
						'background': 'linear-gradient(to right, rgb(135, 206, 235), rgb(0, 0, 205))',
						'color': '#fff'
					};
				} else {
					this.buttonText = '已到场';
					this.buttonStyle = {
						'background': 'gray',
						'color': '#000' // 假设已到场文字颜色为黑色，你可根据实际调整
					};
				}
			}
		},
		watch: {
			'maintain.state': {
				handler(newVal, oldVal) {
					if (newVal != 0) {
						this.status = 1
						this.handleClick()
					} else {
						this.status = 0
						this.handleClick()
					}
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		// style="margin-top:10rpx;margin-right:30rpx; width: 480rpx;"
		width: 410rpx;
		border-radius: 100rpx;
	}

	.carsimg {
		display: flex;
	}

	.top {
		padding-right: 20rpx;
		padding-left: 20rpx;
		height: 330rpx;
		background-color: #2f81fa;
		padding-top: 60rpx;
	}
</style>